<template>
    <nav class="navbar">
      <div class="container">
        <router-link to="/" class="logo">电影天堂</router-link>
        
        <div class="nav-links">
          <router-link to="/movies">电影列表</router-link>
          <template v-if="authStore.user">
            <router-link to="/movies/add">添加电影</router-link>
            <span class="username">{{ authStore.user.username }}</span>
            <button @click="handleLogout" class="logout-btn">退出</button>
          </template>
          <template v-else>
            <router-link to="/login">登录</router-link>
            <router-link to="/register">注册</router-link>
            <router-link to="/movies/add">添加电影</router-link>
            <button @click="handleLogout" class="logout-btn">退出</button>
          </template>
        </div>
      </div>
    </nav>
  </template>
  
  <script setup>
  import { useAuthStore } from '@/stores/auth'
  import { useRouter } from 'vue-router'
  
  const authStore = useAuthStore()
  const router = useRouter()
  
  const handleLogout = () => {
    // 清除用户认证状态
    authStore.logout()

    // 跳转到登录页面
    router.push('/login')
  }
  </script>
  
  <style scoped lang="scss">
  .navbar {
    background: #008b8b;  // 深水绿色作为背景
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .logo {
      font-size: 1.5rem;
      font-weight: bold;
      color: white;
      text-decoration: none;
    }
    
    .nav-links {
      display: flex;
      gap: 1.5rem;
      align-items: center;
      
      a {
        color: white;
        text-decoration: none;
        font-weight: 500;
        transition: opacity 0.3s;
        
        &:hover {
          opacity: 0.8;
        }
        
        &.router-link-exact-active {
          text-decoration: underline;
        }
      }
      
      .username {
        color: #ddd;  // 保持用户名颜色不变，因为它是次要文字
        font-style: italic;
      }
      
      .logout-btn {
        background: transparent;
        color: white;
        border: 1px solid white;
        padding: 0.5rem 1rem;
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.3s;
        
        &:hover {
          background: rgba(255, 255, 255, 0.1);  // 保持悬停效果不变
        }
      }
    }
  }
</style>